<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/register/jquery-3.1.0.min.js}"></script>
</head>
<style>
    ::-webkit-scrollbar {display:none}/*隐藏横向滚动条但可以滚动*/
</style>
<body>
<form class="layui-form">
    <div class="layui-form-item" style="margin-top: 20px;">
        <label class="layui-form-label">班级类别</label>
        <div class="layui-input-inline">
            <select   name="classno">
                <option value="">请选择</option>
                <option th:each="l:${classtypeList}"th:value="${l.classtypeid}" th:text="${l.classtypename}"></option>
            </select>
        </div>
        <label class="layui-form-label">班级名称</label>
        <div class="layui-input-inline">
            <input  name="classname" required lay-verify="required" placeholder="班级名称" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">授课老师</label>
        <div class="layui-input-inline">
            <select   name="teacher">
                <option value="">请选择</option>
                <option th:each="l:${subjectTeacherList}"th:value="${l.emp_id}" th:text="${l.emp_name}" ></option>
            </select>
        </div>

        <label class="layui-form-label">班主任</label>
        <div class="layui-input-inline">
            <select  name="classteacher">
                <option value="">请选择</option>
                <option th:each="l:${classTeacherList}"th:value="${l.emp_id}" th:text="${l.emp_name}"></option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所在系</label>
        <div class="layui-input-inline">
            <select lay-filter="selectTheme" id="board" name="deptid">
                <option value="">请选择</option>
                <option th:each="e:${deptList}"th:value="${e.deptid}" th:text="${e.deptname}"></option>
            </select>
        </div>
        <label class="layui-form-label">专业</label>
        <div class="layui-input-inline">
            <select id="theme" name="majorid">
                <option value="">请选择</option>
                <option th:each="sh:${majorList}" th:value="${sh.majorid}" th:text="${sh.majorname}" ></option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">届别</label>
        <div class="layui-input-inline">
            <select name="falled"  >
                <option value="">请选择</option>
                <option th:each="c:${studentfallList}"th:value="${c.fallid}" th:text="${c.level}">部门</option>
            </select>
        </div>
        <label class="layui-form-label"><i class="layui-icon">&#xe6b2;</i>备注</label>
        <div class="layui-input-inline">
            <input  name="remark" placeholder="备注" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="margin-left: 130px;margin-top: 30px">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button><!--测试提交值的时候把 lay-filter="formDemo"注释掉可直接提交-->
            <button type="reset" class="layui-btn layui-btn-radius layui-btn-warm">重新填写</button>
        </div>
    </div>
</form>
</body>
<script type="text/javascript" th:inline="none">
    layui.use('form', function(){
        var form = layui.form;
        form.on('select(selectTheme)', function (data) {//对应lay-filter="selectTheme"
            var index1 = $('#board option:selected').val();//对应id="board"  得到一级菜单选中值的value
            var optionJson = [];
            $.ajax({
                url: "/studentClass/byDeptId",//对应controller层
                type: "post",
                data: {"id": index1},//将选中值的value传给controller
                datatype: "json",
                success: function (data) {
                    optionJson = data;
                    var selectObj = document.getElementById("theme");//对应id="theme"
                    selectObj.options.length = 0;
                    for (var i = 0; i < data.length; i++) {
                        selectObj.add(new Option(optionJson[i].majorname, optionJson[i].majorid));//对应数据库中名字，两个参数是(文本,value)
                    }
                    form.render();
                }
            })
        });

        //监听提交
        //你可以在这里做操作  也可以不使用这个方法
        form.on('submit(formDemo)', function(data){
            $.ajax({
                url: '/studentClass/add',
                type: 'post',
                data:data.field,
                dataType: 'json',
                success:function(data){
                    if(data != 0){
                        //先得到当前iframe层的索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //再执行关闭
                        parent.layer.close(index);
                        layer.msg(JSON.stringify("添加成功"));
                        window.parent.location.reload();
                    }else {
                        layer.msg('数据错误，添加失败！', { icon: 5, time: 2000 });
                    }
                },
            })
            return false;
        });
    });
</script>
</html>